<template>
  <div class="bannerList pd-20">
    <el-input v-model="param.title"
              placeholder="请输入标题"
              class="w-200"
              clearable
              @clear="handleQuery" />
    <el-select v-model="param.positionType"
               filterable
               clearable
               class="w-200"
               @change="changePositionType">
      <el-option v-for="item in positionTypeList"
                 :value="item.code"
                 :label="item.name"
                 :key="item.code">
      </el-option>
    </el-select>
    <el-button type="primary"
               @click="handleQuery">查 询</el-button>
    <el-button type="primary"
               @click="handleAdd">新 增</el-button>
    <Table :columns="tableCol"
           :data="tableData"
           border
           stripe
           class="mt-20">
      <template slot-scope="{row}"
                slot="action">
        <span @click="handleView(row)">详细</span>
        <span @click="handleEdit(row)">编辑</span>
        <span @click="handleDel(row)">删除</span>
      </template>
    </Table>
    <page @getList="_getList"
          :pageTotal="pageTotal"
          ref="page"></page>
  </div>
</template>

<script>

  import Page from '@/base/page/page'
  import { mapGetters } from 'vuex'
  import { activityMgt } from '@/api/codeName'

  export default {
    name: "bannerList",
    data () {
      return {
        tableCol: [
          {
            type: 'index2',
            title: '',
            width: 60,
            render: (h, params) => {
              return h('span', params.index + (this.page.pageIndex) * this.page.pageSize + 1);
            }
          },
          {
            title: '图片',
            key: 'imageUrl',
            // width: 95,
            render: (h, params) => {
              return h('div', [
                h('el-image', {
                  attrs: {
                    src: params.row.imageUrl,
                    preview: 'bannerList',
                    fit:'contain '
                  },
                  style: {
                    width: '170px',
                    height: '50px',
                    margin: '10px'
                  }
                }),
              ]);
            }
          },
          {
            title: '标题',
            key: 'title'
          },
          {
            title: '位置类型',
            key: 'positionType',
            render: (h, params) => {
              if (params.row.positionType == '0') {
                return h('span', '医生端轮播');
              } else if (params.row.positionType == '1') {
                return h('span', '运营后台登录');
              } else if (params.row.positionType == '2') {
                return h('span', '医生端闪频');
              } else if (params.row.positionType == '3') {
                return h('span', '用户端闪频');
              } else if (params.row.positionType == '4') {
                return h('span', '用户端轮播');
              } else if (params.row.positionType == '5') {
                return h('span', '商城轮播');
              } else if (params.row.positionType == '6') {
                return h('span', '官网轮播');
              } else if (params.row.positionType == '7') {
                return h('span', '个人版首页弹屏');
              } else if (params.row.positionType == '8') {
                return h('span', '个人版新科技弹屏');
              } else if (params.row.positionType == '9') {
                return h('span', '医生端首页弹屏');
              } else if (params.row.positionType == '10') {
                return h('span', '个人版启动广告');
              } else if (params.row.positionType == '11') {
                return h('span', '医生版启动广告');
              } else if (params.row.positionType == '12') {
                return h('span', '医院二维码扫码下载页');
              } else {
                return h('span', '其他');
              }
            }
          },
          {
            title: '排序',
            key: 'sortNum'
          },
          {
            title: '是否显示',
            key: 'isShow',
            render: (h, params) => {
              if (params.row.isShow == '1') {
                return h('span', '是');
              } else {
                return h('span', '否');
              }
            }
          },
          {
            title: '创建时间',
            key: 'createTime',
            width: 150,
            render: (h, params) => {
              return h('span',
                this.commonFunction.timestampFormat(new Date(params.row.createTime), 'yyyy-MM-dd hh:mm'));
            }
          },
          {
            title: '操作',
            slot: 'action',
            align: 'center'
          }
        ],
        tableData: [],
        pageTotal: 0,       //总条数
        positionTypeList: activityMgt.bannerMgt.positionType,
        param: {
          positionType: '',
          title: ''
        }
      }
    },
    mounted () {
      if (this.params.bannerMgt) {
        this.param = this.params.bannerMgt
      } else {
        this.$store.commit('SET_PARAMS', { bannerMgt: this.param })
      }
      this._getList()
    },
    methods: {
      handleQuery () {
        this.page.pageIndex=0
        this._getList()
      },
      changePositionType (val) {
        this.param.positionType = val;
        this.handleQuery();
      },
      handleAdd () {
        this.$router.push({ name: 'bannerAdd' })
      },
      handleView (row) {
        this.$router.push({ name: 'bannerView', query: { id: row.id } })
      },
      handleEdit (row) {
        this.$router.push({ name: 'bannerUpdate', query: { id: row.id } })
      },
      handleDel (row) {
        this.$Modal.confirm({
          title: '确认',
          content: '<p>您确认删除该图片？</p>',
          onOk: () => {
            this.ajax({
              type: this.api.bannerDel.type,
              url: this.api.bannerDel.url,
              isSubmit: true,
              data: {
                id: row.id,
              },
              success: (data) => {
                this.$Message.success('操作成功');
                this._getList()
              },
              error: (data) => {
                this.$Message.error(data.message);
              }
            })
          },
          onCancel: () => {
          }
        });
      },
      _getList () {
        this.ajax({
          type: this.api.bannerList.type,
          url: this.api.bannerList.url,
          data: Object.assign({}, this.page, this.param),
          success: (data) => {
            this.tableData = data.object
            this.pageTotal = data.totalNum
            this.$previewRefresh()
          },
          error: (data) => {
            this.$Message.error(data.message);
          }
        })
      }
    },
    computed: {
      ...mapGetters([
        'page',
        'params'
      ])
    },
    components: {
      Page
    }
  }
</script>

<style scoped lang="scss" type="text/scss" rel="stylesheet/scss">
  .bannerList {
  }
</style>
